<template>
    <div id="about">
        <header-img></header-img>
        <header-navbar></header-navbar>
        <div class="content">
            <p v-html="inner.content"></p>
        </div>
    </div>
</template>

<script>
    import HeaderImg from "@/components/index/HeaderImage";
    import HeaderNavbar from "@/components/index/HeaderNavbar";
    export default {
        components: {
            HeaderImg,
            HeaderNavbar
        },
        data() {
            return {
                inner: {}
            }
        },
        computed: {
            id() {
                return this.$route.params.id 
            }
        },
        watch: {
            id() {
                this.getInner()
            }
        },
        mounted () {
            this.getInner();
        },
        methods: {
            async getInner() {
                let id = this.$route.params.id 
                let res = await this.$axios.post("/port/index/aboutinfo", { key: this.$key, id })
                let code = res.data.code
                console.log(res);
                
                if (code == 200) {
                    let inner = res.data.data[0]
                    inner.content = this.artMat( inner.content )
                    this.inner = inner
                    
                }
            },
            // 文章内容格式化
            artMat( val ) {
                let str = ""
                let reg = /&lt;/g
                let reg1 = /&gt;/g
                let reg3 = /&quot;/g
                let reg4 = /&amp;quot;/g
                let reg5 = /com/g
                str = val.replace(reg3, '').replace(reg,"<").replace(reg1,">").replace(reg4, "").replace(/mini/g,"www").replace(reg5, "club")
                return str
            },
        },
    }
</script>

<style lang="scss" scoped>
#about {
    width: 100%;
    .content {
        width: 1200px;
        margin: 20px auto;
        box-sizing: border-box;
        box-shadow: 0 0 5px #aaa;
        padding: 30px;
        border-radius: 30px;
    }
}
</style>